<template>
  <el-container style="width: 100%;margin: 0 auto;height: calc(100vh - 160px);">
    <el-header>
      <h2 style="font-size: 36px">工作概况</h2>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="12" id="echart1" ref="echart" style="height:300px"></el-col>
        <el-col :span="12" id="echart2" ref="echart" style="height:300px"></el-col>
      </el-row>
      <el-divider class="divider" content-position="left"><span
          style="font-size: 18px;letter-spacing: 1.2rem;">就业记录</span>
      </el-divider>
      <el-table
          :data="companyData"
          stripe
          style="width: 100%">
        <el-table-column
            prop="company_name"
            label="公司名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="company_location"
            label="公司地址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="company_position"
            label="公司职位">
        </el-table-column>
        <el-table-column
            prop="company_time"
            label="就业时间">
        </el-table-column>
        <el-table-column
            prop="company_salary"
            label="公司薪资(月)">
        </el-table-column>
        <el-table-column
            label="企业评价"
            prop="my_score"
        >
          <template #default="ss">
            <el-rate
                :model-value="ss.row.my_score"
                disabled
                show-score
                text-color="#ff9900"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
            prop="company_detail"
            label="操作"
        >
          <template #default="scope">
            <el-button @click="handleDetail(scope.row)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
  <el-dialog
      v-model="outerVisible"
      top="3vh"
  >
    <template #title>
      <h2 style="font-size: 1.8rem">就业概况</h2>
    </template>
    <el-row class="show_dialog_data">
      <el-col :span="20">
        <h3 style="font-weight: normal;text-align: left;font-size: 1.5rem">{{ show_data.company_name }}</h3>
        <ul>
          <li>{{ show_data.company_location }}</li>
          <li>{{ show_data.company_position }}</li>
          <li>{{ show_data.company_time }}</li>
          <li>{{ show_data.company_salary }}</li>
          <li>
            <el-rate
                :model-value="show_data.my_score"
                disabled
                show-score
                text-color="#ff9900"
            ></el-rate>
          </li>
        </ul>
      </el-col>
      <el-col :span="2">
        <el-image :src="show_data.head_img_src" style="width: 100%"></el-image>
      </el-col>
    </el-row>
    <el-row>
      <div
          style="text-align: left;text-indent: 2rem;line-height: 1.5rem;font-size: 16px"
          v-html="'<p>'+show_data.company_intro.replace('\n','</p><p>')+'</p>'"></div>
    </el-row>
    <el-dialog
        width="40%"
        v-model="innerVisible"
        top="5vh"
        append-to-body>
      <template #title>
        <el-row class=" ">
          <el-col :span="5"><h3 style="font-size: 24px">企业评价</h3></el-col>
          <el-col :span="8" class="both_center" style="">
            <el-rate
                :model-value="show_data.my_score"
                disabled
                show-score
                text-color="#ff9900"
            ></el-rate>
          </el-col>
        </el-row>
      </template>
      <el-timeline>
        <el-timeline-item :timestamp="item.timestamp"
                          placement="top"
                          v-for="item in show_data.rate_detail"
                          :key="item.timestamp"
                          :type="parseFloat(item.score)<=2.5?'danger':parseFloat(item.score)<=3.5?'warning':parseFloat(item.score)<=4?'primary':'success'"
        >
          <el-card
              class="item_card"
              :body-style="{padding:'8px 10px'}"
          >
            <template #header>
              <el-rate
                  :model-value="item.score"
                  disabled
                  show-score
                  text-color="#ff9900"
              ></el-rate>
            </template>
            <p style="font-size: .9rem;line-height: 1.5rem" v-for="detail in item.detail" :key="detail"
               v-html="detail"></p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">关闭</el-button>
        <el-button type="primary" @click="innerVisible = true">企业评价</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "usr_admin_gzgk",
  data() {
    return {
      companyData: [
        {
          company_name: '阿里巴巴集团',
          company_location: '北京',
          company_position: 'CEO',
          company_time: '2020.2-2021.2',
          company_salary: '48K',
          my_score: 3.5,
          head_img_src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/28',
          company_intro: '阿里巴巴网络技术有限公司（简称：阿里巴巴集团或阿里巴巴）是以曾担任英语教师的马云为首的18人于1999年在浙江省杭州市创立的公司。\n' +
              '阿里巴巴集团经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。\n' +
              '2014年9月19日，阿里巴巴集团在纽约证券交易所正式挂牌上市，创造了史上最大IPO记录，股票代码“BABA”，创始人为马云。2019年11月26日，阿里巴巴港股上市，总市值超4万亿，登顶港股成为港股“新股王”。\n' +
              '2019年9月1日，2019中国服务业企业500强榜单在济南发布，阿里巴巴集团控股有限公司排名第24位。9月6日，阿里巴巴集团宣布20亿美元全资收购网易考拉，领投网易云音乐7亿美元融资。10月，2019福布斯全球数字经济100强榜位列10位。10月23日， 2019《财富》未来50强榜单公布，阿里巴巴集团排名第11。“一带一路”中国企业100强榜单排名第5位。11月16日，胡润研究院发布《2019胡润全球独角兽活跃投资机构百强榜》，阿里巴巴排名第7位。12月，阿里巴巴集团入选2019中国品牌强国盛典榜样100品牌。\n' +
              '2020年1月11日，鼠年春晚首次联排当日，阿里巴巴宣布其成为独家电商合作伙伴，并提供电商补贴。',
          rate_detail: [
            {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45'],
              score: '4.8'
            }, {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45'],
              score: '3.2'
            }, {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45'],
              score: '2.2'
            },
          ]
        }, {
          company_name: '浪潮集团',
          company_location: '济南',
          company_position: 'CTO',
          company_time: '2020.2-2021.2',
          company_salary: '25K',
          my_score: 3.7,
          head_img_src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/28',
          company_intro: '浪潮集团有限公司，即浪潮集团，是中国本土综合实力强大的大型IT企业之一，中国领先的云计算、大数据服务商。浪潮集团旗下拥有浪潮信息、浪潮软件、浪潮国际三家上市公司，业务涵盖云数据中心、云服务大数据、智慧城市、智慧企业四大产业群组，为全球120多个国家和地区提供IT产品和服务，正向云计算、大数据、智慧城市运营服务商转型，打造“云+数+AI”新型互联网企业。',
          rate_detail: [
            {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45']
            }, {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45']
            },]
        }, {
          company_name: '京东集团',
          company_location: '上海',
          company_position: 'CTO',
          company_time: '2020.2-2021.2',
          company_salary: '16K',
          my_score: 3.9,
          head_img_src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/28',
          company_intro: '京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。2014年5月在美国纳斯达克证券交易所正式挂牌上市。2015年7月，京东凭借高成长性入选纳斯达克100指数和纳斯达克100平均加权指数。2016年6月与沃尔玛达成深度战略合作，1号店并入京东。\n' +
              '2017年1月4日，中国银联宣布京东金融旗下支付公司正式成为银联收单成员机构。2017年4月25日，京东集团宣布正式组建京东物流子集团。2017年8月3日，2017年“中国互联网企业100强”榜单发布，京东排名第四位。2019年7月，发布2019《财富》世界500强：位列139位。\n' +
              '2018年3月15日，京东内部公告成立了“客户卓越体验部”，该部门将整体负责京东集团层面客户体验项目的推进。2018年《财富》世界500强排行榜第181名。2018年7月24日，京东增资安联财险中国的方案获得了银保监会的批准。9月4日，京东集团与如意控股集团签署战略合作协议。2019年8月22日，进入2019中国民营企业500强前十名；2019中国民营企业服务业100强发布，京东集团排名第4。2019年9月7日，中国商业联合会、中华全国商业信息中心发布2018年度中国零售百强名单，京东排名第2位。2019年10月，在福布斯全球数字经济100强榜排第44位。\n' +
              '2020年4月，京东确认将赴港上市。12月18日，京东集团就京东金融广告道歉：严格问责，全集团进行反省教育。 ',
          rate_detail: [
            {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45']
            }, {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45']
            },]
        }, {
          company_name: '拼多多集团',
          company_location: '深圳',
          company_position: 'CTO',
          company_time: '2020.2-2021.1',
          company_salary: '4K',
          my_score: 4.1,
          head_img_src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/28',
          company_intro: '拼多多是国内移动互联网的主流电子商务应用产品。专注于C2M拼团购物的第三方社交电商平台，成立于2015年9月，用户通过发起和朋友、家人、邻居等的拼团，可以以更低的价格，拼团购买优质商品。旨在凝聚更多人的力量，用更低的价格买到更好的东西，体会更多的实惠和乐趣。通过沟通分享形成的社交理念，形成了拼多多独特的新社交电商思维。\n' +
              '2020年8月11日，中国最大的农产品上行平台拼多多正式开启第二届“农货节”。\n' +
              '2020年8月19日，拼多多（上海）网络科技有限公司发生多项工商变更，拼多多联合创始人孙沁退出该公司法定代表人、董事及经理，均由拼多多高级副总裁朱健翀接任；与此同时，拼多多创始人黄峥、拼多多CEO陈磊退出公司董事，新增朱健翀为董事。2020年9月，拼多多成为2021年春晚独家红包互动合作伙伴。\n' +
              '2021年1月，拼多多退出与央视春晚的红包合作项目。 ',
          rate_detail: [
            {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45']
            }, {
              timestamp: '2018/4/12',
              detail: ['王小虎 提交于 2018/4/12 20:46', '王小虎 提交于 2018/4/12 20:45']
            },]
        },
      ],
      value: 3.7,
      outerVisible: false,
      innerVisible: false,
      show_data: {}
    }
  },
  methods: {
    handleDetail(row) {
      this.outerVisible = true
      this.show_data = row
    },
    sortMethod(a, b) {
      return a.company_time - b.company_time
    },
    createChart() {
      const xAxis = [];
      const yAxis = [];
      for (let i = 0; i < this.companyData.length; i++) {
        xAxis.push(this.companyData[i].company_location + " " + this.companyData[i].company_name)
        yAxis.push(parseInt(this.companyData[i].company_salary.slice(0, this.companyData[i].company_salary.length - 1)))
      }
      this.$echarts.init(document.getElementById('echart1')).setOption({
        title: {
          text: '薪资变化',
          subtext: '月薪(K)'
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: yAxis,
          type: 'line'
        }],
        dataZoom: [
          {// 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,// 左边在 10% 的位置。
            end: 90// 右边在 60% 的位置。
          }
        ],
      });
      this.$echarts.init(document.getElementById('echart2')).setOption({
        title: {
          text: '薪资变化',
          subtext: '月薪(K)'
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: yAxis,
          type: 'line'
        }],
        dataZoom: [
          {// 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,// 左边在 10% 的位置。
            end: 90// 右边在 60% 的位置。
          }
        ],
      });
    }
  },
  mounted() {
    this.companyData = this.companyData.sort(this.sortMethod)
    this.createChart()
  }
}

</script>

<style scoped>
.divider >>> .el-divider__text {
  background-color: #F5F7FA;
}

.show_dialog_data {
  margin: 0 0 10px;
}

.show_dialog_data ul {
  list-style: none;
  height: 16px;
  margin: 10px 0;
}

.show_dialog_data li {
  float: left;
  line-height: 16px;
  font-size: 13px;
  display: inline-block;
  padding: 0 20px;
  border-right: 1px solid #d7d7d7;
}

.show_dialog_data li:first-child {
  padding-left: 0;
}

.show_dialog_data li:last-child {
  border: none;
}

p {
  font-size: 16px;
}

.item_card >>> .el-card__header {
  padding: 8px 20px;
}

.item_card >>> .el-rate__item i, .item_card >>> .el-rate__text {
  font-size: 16px;
}
</style>
